﻿<!DOCTYPE html>
<html>
<head>
    <title>汇总报表：实现汇总报表向明细报表的透视(Drilldown) - WEB HTML5报表演示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
	<script src="../grhtml5-6.6-min.js" type="text/javascript"></script>
	
    <script type="text/javascript">
        var reportViewer;

        //在网页初始加载时启动报表的运行显示
        function window_onload() {
            reportViewer = window.rubylong.grhtml5.insertReportViewer("report_holder", "../../grf/SummaryToDetail/Summary.grf", "");

            reportViewer.report.OnInitialize = OnInitialize;

            btnRefresh_onclick();
        }

        function OnInitialize() {
            var report = reportViewer.report,
                BeginDate = document.getElementById("txtBeginDate").value,
                EndDate = document.getElementById("txtEndDate").value;

            //定义报表交互事件，实现报表穿透查询
            //特别注意：报表可视元素交互事件必须定义在报表的初始化事件里，此时报表模板已经载入，各个元素才变得可以使用
            report.DetailGrid.ColumnContent.ondblclick = ondblclickColumnContent; //定义内容行双击事件响应
            report.DetailGrid.Groups.Item("GroupGrand").Footer.ondblclick = onclickGroupGrandFooter; //定义一级分组的分组尾的双击事件响应，Item(1).Footer也可以
            report.DetailGrid.Groups.Item("GroupSub").Footer.ondblclick = onclickGroupSubFooter;     //定义二级分组的分组尾的双击事件响应，Item(2).Footer也可以 

            //根据查询参数更新报表付标题，设置报表中的对应静态框的“Text”属性
            report.ControlByName("SubTitle").AsStaticBox.Text = "日期范围：" + BeginDate + "至" + EndDate;
        }

        function ondblclickColumnContent(evt, ColumnContent) {
            //点击明细行，根据对应的产品筛选穿透数据
            var report = ColumnContent.report, //reportViewer.report,
                recordset = report.DetailGrid.Recordset,
                BeginDate = document.getElementById("txtBeginDate").value,
                EndDate = document.getElementById("txtEndDate").value,
                ProductID = report.DetailGrid.Recordset.FieldByName("ProductID").AsInteger, //取当前行对应记录的字段值
                URL = "Detail.jsp?BeginDate=" + BeginDate + "&EndDate=" + EndDate + "&ProductID=" + ProductID;

                window.open(encodeURI(URL), "_blank"); //根据URL打开明细报表
        }
        function onclickGroupGrandFooter(evt, GroupFooter) {
            //点击总计分组尾，仅根据日期范围筛选穿透数据
            var report = GroupFooter.report, //reportViewer.report,
                recordset = report.DetailGrid.Recordset,
                BeginDate = document.getElementById("txtBeginDate").value,
                EndDate = document.getElementById("txtEndDate").value,
                URL = "Detail.jsp?BeginDate=" + BeginDate + "&EndDate=" + EndDate;

            window.open(URL, "_blank"); //根据URL打开明细报表
        }
        function onclickGroupSubFooter(evt, GroupFooter) {
            //点击小计分组尾，根据对应的产品类别筛选穿透数据
            var report = GroupFooter.report, //reportViewer.report,
                recordset = report.DetailGrid.Recordset,
                BeginDate = document.getElementById("txtBeginDate").value,
                EndDate = document.getElementById("txtEndDate").value,
                CategoryID = report.DetailGrid.Recordset.FieldByName("CategoryID").AsInteger, //取当前行对应记录的字段值
                URL = "Detail.jsp?BeginDate=" + BeginDate + "&EndDate=" + EndDate + "&CategoryID=" + CategoryID;

            window.open(URL, "_blank"); //根据URL打开明细报表
        }

        //根据数据过滤参数重新显示报表
        function btnRefresh_onclick() {
            var BeginDate = document.getElementById("txtBeginDate").value,
                EndDate = document.getElementById("txtEndDate").value,
                dataURL = encodeURI("../../data/DataCenter.jsp?data=FilterSaleSummary&BeginDate=" + BeginDate + "&EndDate=" + EndDate);

            reportViewer.stop(); //首先要停止报表运行
            reportViewer.dataURL = dataURL; //重置报表的数据URL
            reportViewer.start(); //重新启动生成报表
        }
    </script>
</head>
<body style="" onload="window_onload()">
    <div style="">
        <span>开始日期：</span>
        <input id="txtBeginDate" type="text" value="1997-1-1" name="txtBeginDate" maxlength="20" style="width: 84px" />
        <span>结束日期：</span>
        <input id="txtEndDate" type="text" value="1997-12-31" name="txtEndDate" maxlength="20" style="width: 80px" />
        <input id="btnRefresh" onclick="return btnRefresh_onclick()" type="button" value="更新显示" name="btnRefresh" />
    </div>
    <div id="report_holder">报表占位标签</div>
</body>
</html>
